@import '~@angular/cdk/overlay';

// foundation setting
$reveal-padding: 0;

$nt-modal-padding: $global-padding !default;
$nt-modal-border: 1px solid $light-gray !default;

$nt-modal-header-font-size: rem-calc(16) !default;

@mixin nt-modal-header {
  padding: $nt-modal-padding;
  display: block;
  font-size: $nt-modal-header-font-size;
  & + .nt-modal-body {
    border-top: $nt-modal-border;
  }
}

@mixin nt-modal-body {
  padding: $nt-modal-padding;
  display: block;
  & + .nt-modal-footer {
    border-top: $nt-modal-border;
  }
}

@mixin nt-modal-footer {
  padding: $nt-modal-padding;
  display: block;
}

@mixin nt-modal {
  @include cdk-overlay;
  .reveal {
    display: block;
    top: 0;
    // width: auto;
    height: auto;
    min-height: 0;

    .nt-modal-header {
      @include nt-modal-header;
    }
    .nt-modal-body {
      @include nt-modal-body;
    }
    .nt-modal-footer {
      @include nt-modal-footer;
    }

    &.reveal-transparent {
      background-color: transparent !important;
      border: 0 !important;
      .close-button {
        color: $white;
      }
    }
  }
  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    &.dark-backdrop {
      background: #000;
      opacity: 0.6 !important;
    }
  }
}
